Working with the Viewer > Customizing the Viewer > Customization Overview > Customization Examples > Creating a Custom Mouse Tool |
A custom mouse tool can be used in the Viewer, first by defining the tool and then by updating the UI to have a button for the tool.
It doesn’t matter where in code the tool is defined as long as it is defined before the tool is selected:
Example |
Copy Code
|
---|---|
// Create the new mouse tool. var myTool = PCCViewer.MouseTools.createMouseTool( "PinkLine", PCCViewer.MouseTool.Type.LineAnnotation); // Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick myTool.getTemplateMark() .setColor("#FF69B4") .setThickness(10); |
This modification will take place in the viewerTemplate.html file. The button can be added to several places in the UI, but a common place to add the button is in the annotate tab pane. Content of the annotate tab is defined in the element with attribute data-pcc-nav-tab="annotate":
Example |
Copy Code
|
---|---|
<!-- The following markup will create a button that enables use of the mouse tool named "PinkLine". The custom attributes that are used: * data-pcc-mouse-tool="PinkLine" - specifies that the button selects the mouse tool named "MyLineTool" * data-pcc-context-menu="false" - specifies that a context menu is not shown for this mouse tool --> <button data-pcc-mouse-tool="PinkLine" data-pcc-context-menu="false" class="pcc-icon pcc-icon-annotate-line" title="Pink Line Tool"></button> |